<html>
<head>
<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak= 4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/layer.js" ></script>
<link rel="stylesheet" type="text/css" media="all"
    href="/styles/layer/layer.css" />
<title>标注地点</title>

<style type="text/css">
body, html, #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}
</style>

</head>

<body>
    <div class="container"><!-- 这是使用了bootstrap -->
        <div id="allmap"></div>
        <form class="form-horizontal" role="form" action="bpm/bmfw/addMaker"
            id="mapMsgForm" method="post">
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="hidden" name="sj" value="${sj }">
                    <!-- 时间-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="hidden" name="bz" value="${ bz}">
                    <!-- 备注 -->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="hidden" name="pointX" value="">
                    <!-- 标记坐标 -->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="hidden" name="pointY" value="">
                    <!-- 标记坐标 -->
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default"></button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">
    var marker;
    var time = 0;
    var sj = $("input[name='sj']").val();
    var bz = $("input[name='bz']").val();
    var pointX;
    var pointY;

    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.703602223,39.5186106251), 18); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
    }));
    map.setCurrentCity("廊坊"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
    //点击地图并在此添加标记
    map.addEventListener("click", function(e) {
        if (time >= 1) {
            return;
        } else {
            popLayer(e);
        }

    });


    var removeMarker = function(e, ee, marker) {//删除标记

        $.ajax({
            type : 'POST',
            async : true,
            url : '/bpm/bmfw/deleteMaker',
            data : {
                    "bjh":bjh
            },success : function(result){
                console.log("删除成功");
                //成功的话向地图上创建标记和标注
                map.removeOverlay(marker);
                time = time - 1;
            },error : function(){
                console.log("删除标注失败！");
            }
        });
    }
    var commitMapMsg = function(e, ee, marker) {//提交地图信息

        $("#mapMsgForm").submit();

    }

    function popLayer(e) {

        //将经纬度存入form中  
        $("input[name='pointX']").val(e.point.lng);
        $("input[name='pointY']").val(e.point.lat);

        //取出经纬度
        pointX = $("input[name='pointX']").val();
        pointY = $("input[name='pointY']").val();

        layer.open({
            title : '确认在此地标注？',
            content : '<p>：' + sj + '</p><p>时间：' + sqr
                    + '</p><p>备注：' + bz + '</p>',
            yes : function(index, layero) {
                //点击确认,即提交信息
                $.ajax({
                    type : 'POST',
                    async : true,
                    url : '/bpm/bmfw/addMaker',
                    data : {
                            "bjh":bjh,
                            "sx":sx,
                            "sqr":sqr,
                            "pointX":pointX,
                            "pointY":pointY
                    },success : function(result){
                        console.log("成功");
                        //成功的话向地图上创建标记和标注
                        createMaker(e);
                    },error : function(){
                        console.log("创建标注失败！");
                    }
                });
                layer.close(index); 
            }
        });
    }

    function createMaker(e){
        marker = new BMap.Marker(e.point);
        map.addOverlay(marker);
        map.panTo(e.point);
        /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
        //创建右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
                .bind(marker)));
        marker.addContextMenu(markerMenu);
        /* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg
                .bind(marker)));

        marker.addContextMenu(markerMenu); */

        //标注
        var text = "<p>没去过的地方：" + bz+ "</p><p>时间：" + sj
                + "</p>";

        var label = new BMap.Label(text, {
            offset : new BMap.Size(-85, -120)
        });
        //设置label(标注的样式)
        label.setStyle({
            color : "black",
            fontSize : "12px",
            height : "110px",
            //lineHeight : "20px",
            fontFamily : "微软雅黑",
            maxWidth : "none",
            border : "none"
        });
        marker.setLabel(label);

        time = time + 1;
    }
</script>
